<template>
  <view class="step-bar">
    <template v-for="(step, index) in visibleSteps" :key="index">
      <view v-if="index !== 0" class="step-divider"></view>
      <view class="step" :class="{ active: step.key === activeStep }">
        <text>{{ step.name }}</text>
      </view>
    </template>
  </view>
</template>

<script lang="ts">
export type Step = {
  key: string | number
  name: string
  back?: Omit<StepAction, 'name'>
  next?: StepAction
}
export type StepAction = {
  name: string
  handle: () => any
  disabled?: ComputedRef<boolean>
}
</script>

<script setup lang="ts">
const props = defineProps<{
  steps: Step[]
  activeStep: string | number
  hidePreviousSteps?: boolean
}>()

const visibleSteps = computed(() => {
  if (!props.hidePreviousSteps) return props.steps
  const activeIndex = props.steps.findIndex((step) => step.key === props.activeStep)
  return props.steps.slice(activeIndex)
})
</script>

<style lang="less">
.step-bar {
  padding: 24rpx 32rpx;
  color: #b4b9c3;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: nowrap;
  .step {
    font-weight: 600;
    font-size: 28rpx;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    &.active {
      font-weight: 600;
      font-size: 64rpx;
      line-height: 90rpx;
      color: var(--dark-color);
    }
    // > text {
    //   flex-shrink: 0;
    // }
  }
  .step-divider {
    // width: 80rpx;
    min-width: 80rpx;
    height: 40rpx;
    // flex: 1;
    margin: 0 8rpx;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 2rpx;
      background-color: #b4b9c3;
    }
  }
}
</style>
